<template>
  <div id="NewBanner" class="relative overflow-hidden h-[190px] lg:h-auto lg:py-5 pt-4 mt-12 lg:mt-[80px]">
    <!--    底部毛玻璃背景-->
    <div
      v-for="(item, idx) in BannerList"
      class="img-opacity absolute lg:blur-3xl top-0 left-0 w-full h-full"
      v-show="($isPcScreen() ? swiperPCIdx : swiperH5Idx) === idx">
      <y-image
        width="10"
        fit="cover"
        fetchpriority="low"
        height="5"
        eager
        :src="$withPicOrigin(item?.imageUrl)"
        class="w-full h-[97%] lg:h-full blur-3xl lg:blur-0 object-cover" />
    </div>
    <!--    轮播图-->
    <div class="lg:mx-auto relative z-1 mx-3.5 lg:w-100 lg:flex justify-start">
      <!--      h5-->
      <div class="lg:hidden mr-0 lg:mr-4 w-full">
        <van-swipe
          class="h-[148px] rounded-lg overflow-hidden"
          :autoplay="4000"
          @change="slideChangeHandle('h5', $event)"
          :show-indicators="false">
          <van-swipe-item @click.native="handleClickLink(item)" v-for="(item, idx) in BannerList">
            <y-image
              width="375"
              :fetchpriority="idx > 0 ? 'low' : ''"
              fit="cover"
              eager
              height="140"
              :class="{ anime: swiperH5Idx === idx }"
              alt="goods banner"
              :src="$withPicOrigin(item.imageUrl)"
              class="banner-img object-cover" />
          </van-swipe-item>
        </van-swipe>
        <section class="new-h5-swiper mt-3 flex justify-center lg:hidden w-[80px] mx-auto">
          <div
            v-for="(item, idx) in BannerList"
            :key="idx"
            class="mr-3 rounded-xl shrink-0 bg-[rgba(255,255,255,0.6)] duration-75 cursor-pointer relative w-1 h-1"
            :class="{ 'bg-[#EB414E]': swiperH5Idx == idx, 'w-big': swiperH5Idx == idx }"></div>
        </section>
      </div>
      <!--      h5-->
      <!--      pc-->
      <van-swipe
        class="hidden h-[420px] rounded-lg overflow-hidden lg:block mr-6 lg:w-[1100px] shrink-0"
        :autoplay="4000"
        ref="swiperPcIns"
        @change="slideChangeHandle('pc', $event)"
        :show-indicators="false">
        <van-swipe-item @click.native="handleClickLink(item)" v-for="(item, idx) in BannerList">
          <y-image
            width="1100"
            fit="cover"
            eager
            alt="goods banner"
            height="480"
            :class="{ anime: swiperPCIdx === idx }"
            :src="$withPicOrigin(item.imageUrl)"
            class="banner-img h-[420px] w-[1100px] object-cover" />
        </van-swipe-item>
      </van-swipe>
      <div class="hidden lg:flex flex-1 overflow-hidden relative items-center">
        <section class="flex flex-col w-full max-h-[405px] hide-scrollbar rtl:mr-3 ltr:ml-3">
          <div
            v-for="(item, idx) in BannerList"
            :key="idx"
            ref="thumbs"
            @click="slidePcNavTo(idx)"
            class="rounded-xl shrink-0 flex hover:bg-[#393d3e] cursor-pointer duration-75 relative overflow-hidden items-center mb-5 px-1.5 py-1 last:mb-0"
            :class="{ 'bg-[#393d3e]': swiperPCIdx == idx }">
            <!--        进度显示-->
            <div
              class="absolute rounded-none left-0 right-0 h-full w-full bg-[#f2ecf521]"
              :class="{ progress: swiperPCIdx == idx, hidden: swiperPCIdx !== idx }"></div>
            <y-image
              width="58"
              fit="cover"
              height="58"
              alt="banner icon"
              :src="$withPicOrigin(item.smallIcon || item.imageUrl)"
              class="object-cover h-14 w-14 shrink-0 rounded-xl ltr:mr-2 rtl:ml-2"
              :class="{ 's-img-aini': swiperPCIdx == idx }" />
            <p class="text-white2 flex-1 break-all line-clamp-2">{{ item.name }}</p>
          </div>
        </section>
      </div>
      <!--      pc-->
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRequest } from '~/composables/useRequest'
import YImage from '~/components/logic/YImage.vue'

const swiperPcIns = ref({} as any)
const swiperH5Idx = ref(0)
const swiperPCIdx = ref(0)
const thumbs = ref([] as HTMLElement[])
const handleClickLink = (options: any) => window.open(options.targetUrl, '__blank')

const slideChangeHandle = (type: 'h5' | 'pc', idx) => {
  if (type === 'h5') return (swiperH5Idx.value = idx)
  swiperPCIdx.value = idx
  if (BannerList.value?.length < 6) return
  // thumbs.value[ins.realIndex]?.scrollIntoView({ behavior: 'smooth', block: 'center' })
}
const slidePcNavTo = (idx) => swiperPcIns.value?.swipeTo(idx)
const { requestGet, requestPost } = useRequest()
// 服务端渲染的数据
const { data: BannerList } = await useAsyncData<any[]>(
  async () => {
    const { data } = await requestGet('/app/home/banners')
    return data
  },
  { default: () => [] },
)
</script>

<style lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.img-opacity {
  &:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(23, 27, 28, 1) 90%, rgba(23, 27, 28, 1));
  }
}

@keyframes scale-big {
  to {
    transform: scale3d(1.03, 1.03, 1.03);
  }
}

@keyframes my-progress {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

.new-h5-swiper {
  width: unset;

  .w-big {
    width: 20px !important;
    background-color: #eb414e !important;
  }
}

#NewBanner {
  //--swiper-navigation-color: white;
  //--swiper-navigation-size: 16px;
  //--swiper-navigation-sides-offset: 26px;
  --swiper-pagination-color: rgba(255, 255, 255, 1);
  --swiper-pagination-bottom: 3px;
  --swiper-pagination-bullet-width: 40px;
  --swiper-pagination-bullet-height: 5px;
  --swiper-pagination-bullet-border-radius: 6px;
  @media screen and (max-width: 1024px) {
    --swiper-pagination-bullet-width: 20px;
  }

  .progress {
    animation: my-progress 4s linear;
  }

  .s-img-aini {
    animation: scale-big 0.5s linear;
  }

  //.swiper-button-next,
  //.swiper-button-prev {
  //  transition: 0.2s;
  //  opacity: 0;
  //  padding: 20px;
  //}
  .h5-swiper {
    width: 100%;
    margin-bottom: 10px;

    &:hover {
      .swiper-button-next,
      .swiper-button-prev {
        opacity: 1;
      }
    }

    &.empty {
      background: #ccc;
      width: auto;
      margin: 0 30px 10px;
      border-radius: 10px;
    }

    &__item {
      width: 100%;
      height: 100%;
      border-radius: 12px;
      overflow: hidden;
    }
  }

  .banner-img {
    width: 100%;
    height: 100%;
    transform: scale3d(1, 1, 1);
    opacity: 0.4;
    transition: 0.7s opacity;

    &.anime {
      opacity: 1;
      animation: scale-big 6s infinite;
    }
  }
}
</style>
